<template>
  <div class="param-container">
    <!-- <div class="param-text">参数设置页面</div> -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column v-if="false" prop="paramId" label="参数ID" width="100" />
      <el-table-column prop="paramName" label="参数名" width="200" />
      <el-table-column prop="paramCode" label="参数代码" width="250" />
      <el-table-column prop="paramValue" label="参数值" width="250" />
      <el-table-column prop="paramDes" label="参数描述" width="350" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="handleClick(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="参数修改" :visible.sync="dialogVisible" width="30%" center>

      <el-form ref="paramForm" :model="paramForm" :rules="paramRules" label-width="85px">
        <el-form-item v-if="false" label="参数ID" prop="paramId">
          <el-input
            ref="paramId"
            v-model="paramForm.paramId"
            disabled
            placeholder="请输入原密码"
            name="paramId"
            class="len"
          />
        </el-form-item>

        <el-form-item label="参数名称" prop="paramName">
          <el-input
            ref="paramName"
            v-model="paramForm.paramName"
            disabled
            placeholder="请输入原密码"
            name="paramName"
            class="len"
          />
        </el-form-item>

        <el-form-item label="参数代码" prop="paramCode">
          <el-input
            ref="paramCode"
            v-model="paramForm.paramCode"
            disabled
            placeholder="请输入原密码"
            name="paramCode"
            class="len"
          />
        </el-form-item>

        <el-form-item label="参数描述" prop="paramDes">
          <el-input
            ref="paramDes"
            v-model="paramForm.paramDes"
            disabled
            placeholder="请输入原密码"
            name="paramDes"
            class="len"
          />
        </el-form-item>

        <el-form-item label="参数值" prop="paramValue">
          <el-input
            ref="paramValue"
            v-model="paramForm.paramValue"
            placeholder="请输入参数值"
            name="paramValue"
            class="len"
            clearable
          />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submit(paramForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryUserList, queryParamList, saveUser, modifyUser, disableUser, resetPassword,
  modifyParam, modifyPassword } from '@/api/sys'
import store from '@/store'
import { MessageBox } from 'element-ui'
import { getUserInfo } from '@/api/user.js'
import router from '@/router'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      paramForm: {
        paramId: '',
        paramName: '',
        paramCode: '',
        paramValue: '',
        paramDes: ''
      },
      oldParamValue: '',
      paramRules: {
        paramValue: [{ required: true, trigger: 'blur', message: '请输入参数值' }]
      }
    }
  },

  mounted() {
    this.initData()
  },

  methods: {
    handleClick(row) {
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          this.paramForm = row
          this.oldParamValue = row.paramValue
          this.dialogVisible = true
        }
      })
    },
    cancel() {
      this.initData()
      this.dialogVisible = false
    },
    submit(val) {
      this.$refs.paramForm.validate(valid => {
        if (valid) {
          if (val.paramValue == this.oldParamValue) {
            this.infoMsg('请修改参数值')
            return
          }
          modifyParam({
            'paramId': val.paramId,
            'paramValue': val.paramValue
          }).then(res => {
            this.sucMsg('修改成功')
            this.initData()
            this.dialogVisible = false
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.warnMsg('请完成表单再提交')
          return false
        }
      })
    },
    initData() { // 初始化数据
      queryParamList().then(res => {
        console.log(res)
        this.tableData = res.list
      }).catch(err => {
        console.log(err)
      })
    },
    infoMsg(msg) { // 普通信息
      this.$message({
        message: msg,
        type: 'info',
        duration: 3 * 1000
      })
    },
    warnMsg(msg) { // 警告信息
      this.$message({
        message: msg,
        type: 'warning',
        duration: 3 * 1000
      })
    },
    errorMsg(msg) { // 错误信息
      this.$message({
        message: msg,
        type: 'error',
        duration: 3 * 1000
      })
    },
    sucMsg(msg) { // 成功信息
      this.$message({
        message: msg,
        type: 'success',
        duration: 3 * 1000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.param {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.len{
  width: 300px;
}
</style>
